<template>
  <p :style="{ color: fontColor }">style1</p>
  <p :style="styleObj">style2</p>
</template>

<script setup>
  import { ref,reactive } from 'vue'
  const fontColor = ref('red')
  const styleObj = reactive({ color: 'blue', background: 'red' })
</script>
  
<style scoped>

</style>